<template>
  <div class="home">
    <!-- 头部标题 -->
    <HeadMain />
    <!-- 场景 -->
    <Seen ref="seen" @clickItem="clickItem" :taskids="taskids" />
    <FootMain :tiptext="tiptext" />
    <!-- 底部提示 -->
    <!-- 进入模块的提示 -->
    <div class="mktipszz" v-if="mktipshow">
      <div class="mktipsbox">
        <img src="@/images/mktips.png" alt="" class="mktipsbj" />
        <img src="@/images/feilogpng.png" alt="" class="mkicon" />
        <div class="mktipsname">
          您已进入诊断床定位精度检测模块，在本模块中，需要根据提示内容完成床面负重、定位误差测试、归位误差测试、结果判断步骤
        </div>

        <div class="mktipsdes beautifulScroll">
          <img src="@/images/jieshao1.png" alt="" class="jieshao1" />
        </div>
        <div
          class="tool mktipsque"
          @click=";(mktipshow = false), (wpchoiceshow = true)"
        >
          <img src="@/images/queac.png" alt="" class="active" />
          <img src="@/images/que.png" alt="" class="normal" />
          <div class="quename">确定</div>
        </div>
      </div>
    </div>

    <!-- 模块物品选择 -->
    <div class="gjtoolbox" v-if="wpchoiceshow">
      <div class="wptipsbox" :class="{ wptipsboxs: gjltips === '回答正确' }">
        {{ gjltips }}
      </div>
      <div class="wpmain">
        <div
          class="wpbox"
          v-for="item in wpdata"
          :key="item.id"
          @click="wpidfn(item.id)"
        >
          <div class="tool">
            <img :src="item.src" alt="" class="wpimgitems" />
            <img
              src="@/images/wpbj.png"
              alt=""
              class="normal"
              :ref="'normalImg' + item.id"
              v-if="!wpid.includes(item.id)"
            />
            <img
              src="@/images/wpbjac.png"
              alt=""
              class="active"
              v-if="!wpid.includes(item.id)"
            />
            <img
              class="wpimgyx"
              src="@/images/wpbjac.png"
              alt=""
              v-if="wpid.includes(item.id)"
            />
          </div>
          <el-tooltip
            effect="dark"
            :content="item.name"
            style="cursor: pointer"
          >
            <div class="wpname">{{ item.name }}</div>
          </el-tooltip>
        </div>
      </div>
      <div class="tool gjtoolqd" @click="wpqdfn">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
      <div
        class="tool gjtoolqd"
        @click=";(wpchoiceshow = false), (mxshow = true)"
        v-if="jxshow"
      >
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">继续</div>
      </div>
    </div>
    <!-- 模型预览show -->
    <div class="mkylbox" v-if="mxshow">
      <!-- 模型预览 -->
      <div class="mxylitem">
        <ShowMx :mxmtnumber="1" v-if="mxshow" />
      </div>
      <!-- 模型介绍 -->
      <div class="mxyldes beautifulScroll">
        诊断床定位精度的检测是通过测量实际床位移与设定值的偏差来验证其准确性。
        50cm钢直尺的核心作用是作为基准长度量具：
        （1）直接标定移动距离：将直尺固定于床面或扫描架，通过床面移动50cm（或分段移动），用直尺刻度直接比对实际位移与系统显示值的误差，无需依赖CT图像（避免图像失真干扰）。
        高精度验证：钢直尺的毫米级精度（通常±0.1mm）远高于CT床位移的允许误差（如±1mm），确保检测结果可靠。
        （2）规避系统误差：避免使用CT内置测量功能（可能受床编码器或软件校准影响），以实物基准独立验证机械精度。
        简言之，50cm钢直尺是脱离CT系统、直接验证床位移真实性的关键物理基准工具。
      </div>
      <div
        class="tool gjtoolqd"
        @click="
          ;(mxshow = false), (taskshow = true), (step = 1), (yxjtipsshow = true)
        "
      >
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 导航菜单 -->
    <!-- 导航菜单 -->
    <div class="taskbox" v-if="taskshow">
      <div
        class="task"
        v-for="item in taskdata"
        :key="item.id"
        @click="step = item.id"
      >
        <div class="taskimg" :class="{ taskimgs: step == item.id }">
          {{ item.name }}
        </div>
        <div
          class="taskitems"
          v-for="items in item.items"
          :key="items.id"
          v-show="step == item.id"
          :class="steps == items.id ? 'taskitemsac' : ''"
          @click="steps = items.id"
        >
          <span>{{ items.name }}</span>
        </div>
      </div>
    </div>
    <!-- 右下角提示框 -->
    <div class="yxjtips" v-if="yxjtipsshow">
      根据WS
      519-2019《X射线计算机体层摄影装置质量控制检测规范》检测时要保证床面负重
      70kg左右
      <div
        class="tool gjtoolqd"
        @click=";(yxjtipsshow = false), (taskids = 1.2)"
      >
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 1.2床面负重选择题 -->
    <div class="cmchoicebox" v-if="taskids == 1.2">
      <!-- 左侧 -->
      <div
        class="cmchoiceitem"
        @click="cmchoiceitemid = 1"
        :class="{
          cmchoiceitemhover: cmchoiceitemid == 1
        }"
      ></div>
      <!-- 右侧 -->
      <div
        class="cmchoiceitem"
        @click="cmchoiceitemid = 2"
        :class="{
          cmchoiceitemhover: cmchoiceitemid == 2
        }"
      ></div>
      <div class="tool gjtoolqd" @click="cmchoiceitemfn">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 床面选择题提示 -->
    <div class="cmchoicetips center" v-if="cmchoicetips != ''">
      {{ cmchoicetips }}
    </div>
    <!-- 2 记录单 -->
    <MK1jLd
      :taskids="taskids"
      @gotask="gotask"
      v-if="
        taskids == 2.1 ||
        taskids == 2.3 ||
        taskids == 2.4 ||
        taskids == 3.1 ||
        taskids == 3.3 ||
        taskids == 3.4
      "
    />
    <!-- 俯视图 -->
    <div class="fsbox" v-if="taskids > 2">
      <!-- 背景图 -->
      <!-- X光 -->
      <!-- 需要动的图 -->
      <div class="fsdt" :style="{ left: -wzsj + 'px' }"></div>
    </div>
    <!-- 控制器 -->
    <div class="kzqbox" v-if="taskids > 2">
      <div class="kzqtitle">{{ wzsj + 157 }}</div>
      <div class="kzqmain">
        <div @click="leftfn">左</div>
        <div @click="rightfn">右</div>
      </div>
    </div>
    <!-- 结果判断 -->
    <div class="jgzzbox" v-if="taskids >= 4.1">
      <!-- 主题框1 -->
      <div class="jgpdbox1 center">
        上述某某医院某某牌医用CT设备质量检测（诊断床定位精度检测）是否符合《中华人民共和国卫生行业标准WS
        519-2019X射线计算机体层摄影装置质量控制检测规范》的要求？
        <!-- 按钮 -->
        <div class="jgpdan center">
          <div class="tool jgpdanitem" @click="taskids = 4.2">是</div>
          <div class="tool jgpdanitem" @click="taskids = 4.3">否</div>
        </div>
      </div>
      <!-- 否 -->
      <div class="jgpdbox1 center" v-if="taskids == 4.3">
        诊断床定位精度检测如不合格，请及时联系CT设备厂家工程师维修，同时应该核实检测设备是否经过国家计量院的标准，是否发生故障
        <!-- 按钮 -->
        <div class="jgpdan center">
          <div class="tool jgpdanitem" @click="taskids = 4.4">确定</div>
        </div>
      </div>
      <!-- 是 -->
      <div class="jgpdbox1 center" v-if="taskids == 4.2">
        经检测该项目符合上述标准要求
        <!-- 按钮 -->
        <div class="jgpdan center">
          <div class="tool jgpdanitem" @click="taskids = 4.4">确定</div>
        </div>
      </div>
      <!-- 最后 -->
      <div class="jgpdbox1 center" v-if="taskids == 4.4">
        您已完成诊断床定位精度检测模块学习

        <!-- 按钮 -->
        <div class="jgpdan center">
          <div class="tool jgpdanitem" @click="gohome">返回模块选择页面</div>
          <div class="tool jgpdanitem" @click="gonext">下一个实验</div>
        </div>
      </div>
    </div>
    <!-- 结果判断完成 -->
  </div>
</template>

<script>
import FootMain from './footMain.vue'
import HeadMain from './headMain.vue'
import MK1jLd from './mK1jLd.vue'
import ShowMx from './showMx.vue'
import Seen from '@/view/seen.vue'

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { ShowMx, HeadMain, Seen, MK1jLd, FootMain },
  data() {
    //这里存放数据
    return {
      mktipshow: true,
      wpchoiceshow: false,
      wpdata: [
        {
          id: 1,
          name: '50mm直尺',
          src: require('@/images/wp10.png')
        },
        {
          id: 2,
          name: '倾角仪',
          src: require('@/images/wp2.png')
        },
        {
          id: 3,
          name: '头模（160mm）',
          src: require('@/images/wp3.png')
        },
        {
          id: 4,
          name: '体模（320mm）',
          src: require('@/images/wp11.png')
        },
        {
          id: 5,
          name: '剂量探头',
          src: require('@/images/wp5.png')
        },
        {
          id: 6,
          name: '水模填充柱',
          src: require('@/images/wp6.png')
        },
        {
          id: 7,
          name: '数据转换器',
          src: require('@/images/wp7.png')
        },
        {
          id: 8,
          name: 'CT性能模体',
          src: require('@/images/wp8.png')
        },
        {
          id: 9,
          name: '笔记本电脑',
          src: require('@/images/wp1.png')
        }
      ],
      wpid: [],
      gjltips: '',
      jxshow: false,
      mxshow: false,
      taskdata: [
        {
          id: 1,
          name: '床面负重'
        },
        {
          id: 2,
          name: '定位误差测试',
          items: [
            {
              id: 1,
              name: '记录进床起始点'
            },
            {
              id: 2,
              name: '进床'
            },
            {
              id: 3,
              name: '记录进床终止点'
            },
            {
              id: 4,
              name: '计算定位误差'
            }
          ]
        },
        {
          id: 3,
          name: '归位误差测试',
          items: [
            {
              id: 1,
              name: '记录进床起始点'
            },
            {
              id: 2,
              name: '退床'
            },
            {
              id: 3,
              name: '记录进床终止点'
            },
            {
              id: 4,
              name: '计算定位误差'
            }
          ]
        },
        {
          id: 4,
          name: '结果判断'
        }
      ],
      tiptext: '',
      step: 0, //大步骤标识
      steps: 0, //小步骤标识
      taskids: 1, //任务表示 - 指的是执行的干什么
      taskshow: false,
      yxjtipsshow: false,
      cmchoiceitemid: 0,
      cmchoicetips: '',
      timer: null,
      wzsj: 0
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    cmchoicetips: {
      handler(i) {
        if (i != '') {
          this.timer = setTimeout(() => {
            this.cmchoicetips = ''
          }, 1000)
        }
      }
    },
    step: {
      handler(i) {
        if (i) {
          this.steps = 1
          if (i == 2 && this.steps == 1) {
            this.taskids = 2.1
          }
          if (i == 2 && this.steps == 2) {
            this.taskids = 2.2
          }
          if (i == 2 && this.steps == 3) {
            this.taskids = 2.3
          }
          if (i == 2 && this.steps == 4) {
            this.taskids = 2.4
          }
          if (i == 3 && this.steps == 1) {
            this.taskids = 3.1
          }
          if (i == 3 && this.steps == 2) {
            this.taskids = 3.2
          }
          if (i == 3 && this.steps == 3) {
            this.taskids = 3.3
          }
          if (i == 3 && this.steps == 4) {
            this.taskids = 3.4
          }
          if (i == 4 && this.steps == 1) {
            this.taskids = 4.1
          }
        }
      },
      immediate: true,
      deep: true
    },
    steps: {
      handler(i) {
        if (i == 1 && this.step == 2) {
          this.taskids = 2.1
        }
        if (i == 2 && this.step == 2) {
          this.taskids = 2.2
        }
        if (i == 3 && this.step == 2) {
          this.taskids = 2.3
        }
        if (i == 4 && this.step == 2) {
          this.taskids = 2.4
        }
        if (i == 1 && this.step == 3) {
          this.taskids = 3.1
        }
        if (i == 2 && this.step == 3) {
          this.taskids = 3.2
        }
        if (i == 3 && this.step == 3) {
          this.taskids = 3.3
        }
        if (i == 4 && this.step == 3) {
          this.taskids = 3.4
        }
        if (i == 1 && this.step == 4) {
          this.taskids = 4.1
        }
      },
      immediate: true,
      deep: true
    },
    taskids: {
      handler(i) {
        if (i == 2.1) {
          this.tiptext = '记录进床起始点'
        }
        if (i == 2.2) {
          this.tiptext = '点击进床按钮，将定位线对准直尺的30cm刻度线'
        }
        if (i == 2.3) {
          this.tiptext = '记录进床终止点'
        }
        if (i == 2.4) {
          this.tiptext =
            '计算定位误差，进床起始点显示数值减去进床终止点显示数值减去终止点钢直尺数值'
        }
        if (i == 3.1) {
          this.tiptext = '记录进床起始点'
        }
        if (i == 3.2) {
          this.tiptext = '点击进床按钮，将定位线对准直尺的30cm刻度线'
        }
        if (i == 3.3) {
          this.tiptext = '记录进床终止点'
        }
        if (i == 3.4) {
          this.tiptext =
            '计算定位误差，进床起始点显示数值减去进床终止点显示数值减去终止点钢直尺数值'
        }
      },
      immediate: true,
      deep: true
    }
  },
  //方法集合
  methods: {
    leftfn() {
      if (this.taskids == 2.2) {
        this.wzsj = this.wzsj + 10
      }
      // 跳转下一步 进床完成 再次弹出数值
      if (this.wzsj + 157 == 157 && this.step == 3 && this.taskids == 3.2) {
        this.taskids = 3.3
        this.steps = 3
      }
    },
    rightfn() {
      if (this.taskids == 2.2) {
        this.wzsj = this.wzsj - 10
      }
      // 跳转下一步 进床完成 再次弹出数值
      if (this.wzsj + 157 == -143 && this.step == 2 && this.taskids == 2.2) {
        this.taskids = 2.3
        this.steps = 3
      }
      // console.log('当前数值', this.wzsj)
    },
    clickItem(i) {
      if (i == '定位等') {
        this.taskids = 1.2
      }
    },
    gotask(i) {
      console.log('子组件跳转数据', i)

      if (i == 2.2) {
        this.steps = 2
        this.taskids = 2.2
      }
      if (i == 2.4) {
        this.steps = 4
        this.taskids = 2.4
      }
      if (i == 3.1) {
        this.step = 3
        this.taskids = 3.1
      }
      if (i == 3.2) {
        this.steps = 2
        this.taskids = 3.2
      }
      if (i == 3.4) {
        this.steps = 4
        this.taskids = 3.4
      }
      if (i == 4.1) {
        this.step = 4
        this.taskids = 4.1
      }
    },
    wpidfn(i) {
      // 检查数组中是否已存在相同的元素
      const index = this.wpid.indexOf(i)
      // 如果存在相同的元素，先删除它
      if (index !== -1) {
        this.wpid.splice(index, 1)
        return
      }
      // 然后再将元素添加到数组中
      this.wpid.push(i)
    },
    wpqdfn() {
      //   正确答案配置
      const requiredValues = [1]
      const wpidSet = new Set(this.wpid) // 将数组转换为 Set 以便于查找
      const requiredSet = new Set(requiredValues)

      // 判断 wpid 是否只包含 1, 2, 3 且没有多余的元素
      if (
        wpidSet.size === requiredSet.size &&
        [...requiredSet].every((val) => wpidSet.has(val))
      ) {
        this.gjltips = '回答正确'
        this.jxshow = true
      } else {
        this.gjltips = '回答错误，正确答案 50mm直尺'
        this.jxshow = true
      }
    },
    cmchoiceitemfn() {
      if (this.cmchoiceitemid == 1) {
        this.taskids = 2
        this.step = 2
      } else if (this.cmchoiceitemid == 2) {
        this.cmchoicetips = '直尺定位位置选择错误，请重新选择'
      } else {
        this.cmchoicetips = '请从选项中选择答案'
      }
    },
    gohome() {
      this.$router.push({
        name: 'home'
      })
    },
    gonext() {
      this.$router.push({
        name: 'mK2'
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.home {
  height: 100%;
  width: 100%;
  position: absolute;
}
.mktipsbox {
  width: 1455px;
  height: 585px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mktipsbj {
  width: 1455px;
  height: 585px;
}
.mkicon {
  width: 210px;
  height: 300px;
  position: absolute;
  left: 120px;
  top: 130px;
}
.mktipsname {
  width: 970px;
  height: 100px;
  position: absolute;
  right: 120px;
  top: 70px;
  font-size: 30px;
  color: #ffffff;
  font-weight: 800;
}
.mktipsdes {
  overflow-y: auto;
  width: 970px;
  height: 260px;
  position: absolute;
  right: 120px;
  top: 180px;
  font-size: 20px;
  color: #ffffff;
  padding: 15px 0;
}

.mktipsque {
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%, 0);
}
.mktipsque img {
  width: 197px;
  height: 48px;
}
.mktipszz {
  width: 100%;
  height: 100%;
  background: #000000da;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 9999999999999999;
}
.jieshao1 {
  width: 745px;
  height: 347px;
}

.quename {
  font-family: DingTalk JinBuTi;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: #cce8e0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  cursor: pointer;
  height: 48px;
  line-height: 48px;
}
.gjtoolbox {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  width: 1104px;
  height: 657px;
  background: linear-gradient(317deg, #bec8d4 0%, #f1f7ff 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px 10px 10px 10px;
  border: 2px solid #213047;
}
.gjtoolqd {
  cursor: pointer;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translate(-50%, 0);
}
.gjtoolqd img {
  width: 142px;
  height: 69px;
}
.gjtoolname {
  font-size: 30px;
  letter-spacing: 2px;
  color: #ffffff;
  position: absolute;
  top: 9px;
}
.wpbox {
  display: flex;
  flex-direction: column;
  width: 154px;
  height: 190px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  margin: 10px 13px;
}
.wpbox img {
  width: 154px;
  height: 154px;
  overflow: hidden;
}
.wpimgyx {
  width: 154px;
  height: 154px;
  cursor: pointer;
}
.wpmain {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 10px;
}
.wpimgitems {
  width: 144px;
  height: 144px;
  position: absolute;
  cursor: pointer;
}

.wpname {
  width: 160px;
  font-size: 26px;
  color: #313d53;
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 显示“...” */
}
.wptipsbox {
  width: 100%;
  text-align: center;
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  color: rgb(255, 54, 4);
}
.wptipsboxs {
  color: rgb(0, 168, 76);
}
.mkylbox {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  background-color: rgb(185, 223, 255);
  padding: 20px;
  box-sizing: border-box;
}
.mxylitem {
  width: 400px;
  height: 300px;
  background-color: rgb(76, 173, 252);
}
.mxyldes {
  width: 350px;
  height: 300px;
  font-size: 18px;
  overflow: hidden;
  overflow-y: auto;
  padding: 0px 20px;
  box-sizing: border-box;
}
.taskbox {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(0, -50%);
}
.task {
  margin: 0px 0;
  cursor: pointer;
  position: relative;
}
.taskimg {
  min-width: 205px;
  max-width: auto;
  height: 42px;
  background: linear-gradient(to bottom, #013c2c, #046b6d);
  color: #ffffff;
  text-align: center;
  line-height: 42px;
  font-size: 18px;
  font-family: PingFang SC, PingFang SC;
}
.taskimgs {
  background: rgba(27, 173, 76, 0.877);
}
.taskimg:hover {
  border-radius: 0px 0px 0px 0px;
  background: rgba(27, 173, 76, 0.877);
  box-sizing: border-box;

  /* opacity: 1; */
}
.taskitems {
  text-align: center;
  min-width: 204px;
  max-width: auto;
  height: 42px;
  line-height: 42px;
  background: #065d14;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #61bff1;
}
.taskitems:hover {
  background: #065d14;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.5;
  /* border: 1px solid #095d89; */
}
.taskitemsac {
  background: linear-gradient(to bottom, #569293, #026961);
  border-radius: 0px 0px 0px 0px;

  /* border: 1px solid #0090ff; */
}
.taskitems span {
  font-size: 18px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  display: block;
}
.taskzt {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 191px;
}
.yxjtips {
  position: absolute;
  right: 20px;
  bottom: 100px;
  font-size: 22px;
  background-color: rebeccapurple;
  width: 400px;
  height: 150px;
  padding: 10px;
}
.cmchoicebox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  background: #008177;
  border-radius: 15px;
  width: 900px;
  height: 550px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 25px;
}
.cmchoiceitem {
  background-color: #9dd0ff;
  width: 400px;
  height: 500px;
  cursor: pointer;
}
.cmchoiceitemhover {
  background-color: #0256a5;
}
.cmchoicetips {
  background: #3b615e;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #ffffff;
  width: 300px;
  height: 150px;
}
.fsbox {
  position: absolute;
  right: 50px;
  top: 100px;
  height: 400px;
  width: 600px;
  background-color: #065d14;
  overflow: hidden;
}
/* 水平线 */
.fsbox::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px; /* 线的粗细 */
  background-color: red;
  transform: translateY(-50%); /* 精确居中 */
  z-index: 99;
}

/* 垂直线 */
.fsbox::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px; /* 线的粗细 */
  height: 100%;
  background-color: red;
  transform: translateX(-50%); /* 精确居中 */
  z-index: 99;
}
.fsdt {
  width: 500px;
  height: 400px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  background-color: #61bff1;
}
.kzqbox {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 520px;
  right: 50px;
  background-color: hsl(188, 21%, 34%);
  height: 360px;
  width: 600px;
}
.kzqtitle {
  width: 100%;
  font-size: 18px;
  color: #f1f7ff;
  line-height: 50px;
  height: 50px;
  text-align: center;
  background-color: #046b6d;
}
.kzqmain {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kzqmain div {
  cursor: pointer;
  color: #ffffff;
  font-size: 22px;
  margin: 0px 15px;
}
.gzzbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* 结果判断样式 */
.jgzzbox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999999;
}
.jgpdbox1 {
  width: 600px;
  height: 200px;
  background-color: #008177;
  font-size: 18px;
  color: #ffffff;
  padding: 20px;
}
.jgpdan {
  display: flex;
  color: #ffffff;
  font-size: 22px;
  cursor: pointer;
  bottom: -150px;
}
.jgpdanitem {
  margin: 0px 15px;
}
</style>
